<!-- 
        作者：dailc 
        时间：2016-05-24
        描述：使用示例 首页
   本示例中,css一律采用link方式手动引入,js除了sea.js意外,全部动态引入
  所有框架的工具类,统一使用别名方式引用
  注意:不要重新再次定义base,要不然会有冲突
-->
<!DOCTYPE html >
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<!--之所以在头部引入了js,是因为这个js是一个全局配置文件,通过这个js动态写入的js和css可以用来控制缓存是否过期
			一般情况下,如果要考虑缓存,都要这么使用
			下面那个通过write写入配置文件,保证每次配置文件都是最新的
		-->
		<script>
			document.write("<script type='text/javascript' src='../js/core/RayApp/cacheControl.config.js?" + Math.random() + "'></scr" + "ipt>");
		</script>
		<script>
			SrcBoot.output([
				'css/mui.min.css',
				'css/mui.picker.min.css',
				'css/common/common.css',
				'css/common/common_list.css',
				'css/iconfont.css',
				'css/index.css'
			]);
		</script>
		<style>
			.mui-table-view {
				margin-bottom: 51px;
			}
		</style>
	</head>

	<body>
		<!-- 标题 -->
		<header id="header" class="mui-bar mui-bar-nav bg-blue">
			<h1 id="title" class="mui-title">RayApp使用示例</h1>
			<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<div id="home" class="mui-control-content mui-active homepage-fullscreen">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">共享学车</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<label class="mui-icon mui-icon-chat mui-pull-right" style="color:gray"></label>
				</header>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div id="gallerySlider">
						</div>
						<div class="mui-row">
							<div class="mui-col-sm-6 mui-col-xs-6">
								<div id="home_apply" class="mui-table-view-cell home-item-father">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_1_left.png" class="home-img-style">
											<p class="white">我要报名</p>
										</div>
									</a>
								</div>
							</div>
							<div class="mui-col-sm-6 mui-col-xs-6">
								<div class="mui-table-view-cell home-item-father">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_1_right.png" class="home-img-style">
											<p class="white">自主团购学车</p>
										</div>
									</a>
								</div>
							</div>
						</div>
						<div class="mui-row">
							<div class="mui-col-sm-4 mui-col-xs-4">
								<div id="home_driving_school" class="mui-table-view-cell home-item-father" style="background: #ffa726;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_2_left.png" class="home-img-style">
											<p class="white">找场地</p>
										</div>
									</a>
								</div>
							</div>
							<div class="mui-col-sm-4 mui-col-xs-4">
								<div id="home_find_coach" class="mui-table-view-cell home-item-father" style="background: #a19aa0;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_2_middle.png" class="home-img-style">
											<p class="white">找教练</p>
										</div>
									</a>
								</div>
							</div>
							<div class="mui-col-sm-4 mui-col-xs-4">
								<div id="home_recommend_car" class="mui-table-view-cell home-item-father" style="background: #5c6bc0;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_2_right.png" class="home-img-style">
											<p class="white">推荐学车</p>
										</div>
									</a>
								</div>
							</div>
						</div>
						<div class="mui-row">
							<div class="mui-col-sm-4 mui-col-xs-4">
								<div class="mui-table-view-cell home-item-father" style="background: #ff6091 ;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_3_left.png" class="home-img-style">
											<p class="white">报名须知</p>
										</div>
									</a>
								</div>
							</div>
							<div class="mui-col-sm-4 mui-col-xs-4">
								<div id="home_order_study" class="mui-table-view-cell home-item-father" style="background: #26c6da;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_3_middle.png" class="home-img-style">
											<p class="white">预约学车</p>
										</div>
									</a>
								</div>
							</div>
							<div class="mui-col-sm-4 mui-col-xs-4">
								<div class="mui-table-view-cell home-item-father" style="background: #26a69a;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_3_right.png" class="home-img-style">
											<p class="white">共享学车</p>
										</div>
									</a>
								</div>
							</div>
						</div>
						<div class="mui-row">
							<div class="mui-col-sm-8 mui-col-xs-8" style="display: flex;flex-direction: column;">

								<div id="home_usedcar" style="margin: 5px;background: #c7c7c7;height: 63.5px;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
									<a>
										<div class="home-item">
											<div style=" display: flex;align-items: center;flex-direction: column;margin-right: 10px;">
												<p class="white" style="margin-bottom:0px;">学员易车</p>
												<p class="white" style="margin-bottom: 0px;">二手车信息</p>
											</div>

											<img src="../img/home/home/car1.png" style="height: 40px;">
										</div>
									</a>
								</div>

								<div id="home_ad" style="margin: 5px;background: #ffa726;height: 63.5px;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
									<a>
										<div class="home-item">
											<div style=" display: flex;align-items: center;flex-direction: column;margin-right: 10px;">
												<p class="white" style="margin-bottom:0px;">广告推荐</p>
												<p class="white" style="margin-bottom: 0px;">共享学车app</p>
											</div>

											<img src="../img/home/home/car2.png" style="height: 40px;">
										</div>
									</a>
								</div>

							</div>
							<div class="mui-col-sm-4 mui-col-xs-4" style="display: flex;flex-direction: column;">

								<div style="margin: 5px;background: #8d789c;height: 39px;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_bottom_1.png" class="home-img-style">
											<p class="white" style="padding-top: 10px;">法律法规</p>

										</div>
									</a>
								</div>

								<div style="margin: 5px;background: #e84e40;height: 39px;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_bottom_2.png" class="home-img-style">
											<p class="white" style="padding-top: 10px;">模拟考试</p>

										</div>
									</a>
								</div>

								<div style="margin: 5px;background: #78909c;height: 39px;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
									<a>
										<div class="home-item">
											<img src="../img/home/home/home_bottom_3.png" class="home-img-style">
											<p class="white" style="padding-top: 10px;">新手上路</p>

										</div>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div id="phone" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">客服电话</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<label class="mui-icon mui-icon-chat mui-pull-right" style="color:gray"></label>
				</header>
				<div>
					<img src="../img/home/phone_header.png" width="100%" />
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" width="73px" src="../img/home/phone_service.png">
							<div class="mui-media-body">
								<p>客服1</p>
								<p class='mui-ellipsis'>电话 : 0592-####### <img src="../img/home/phone_icon.png" width="20px" align="right" /></p>
								<p class='mui-ellipsis'>QQ : 05920023123 <img src="../img/home/qq_icon.png" width="20px" align="right" /></p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" width="73px" src="../img/home/phone_service.png">
							<div class="mui-media-body">
								<p>客服2</p>
								<p class='mui-ellipsis'>电话 : 0592-####### <img src="../img/home/phone_icon.png" width="20px" align="right" /></p>
								<p class='mui-ellipsis'>QQ : 05920023123 <img src="../img/home/qq_icon.png" width="20px" align="right" /></p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" width="73px" src="../img/home/phone_service.png">
							<div class="mui-media-body">
								<p>客服3</p>
								<p class='mui-ellipsis'>电话 : 0592-####### <img src="../img/home/phone_icon.png" width="20px" align="right" /></p>
								<p class='mui-ellipsis'>QQ : 05920023123 <img src="../img/home/qq_icon.png" width="20px" align="right" /></p>
							</div>
						</a>
					</li>
				</ul>

			</div>
			<div id="exam" class="mui-control-content" style="padding-left: 10px;padding-right: 10px;">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">预约考试</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<label class="mui-icon mui-icon-chat mui-pull-right" style="color:gray"></label>
				</header>
				<div class="exam-div">
					<img src="../img/exam/calendar.png" class="exam-img" />
					<p class="exam-p">预约考试日期</p>
				</div>

				<button id='timepicker' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间</button>
				<div class="exam-div">
					<img src="../img/exam/p.png" class="exam-img" />
					<p class="exam-p">场地选择</p>
				</div>
				<select>
					<option value="volvo">C1</option>
					<option value="saab">C2</option>
					<option value="opel">C3</option>
					<option value="audi">B1</option>
					<option value="audi">B2</option>
					<option value="audi">A1</option>
					<option value="audi">A2</option>
					<option value="audi">A3</option>
				</select>
				<div class="exam-div">
					<img src="../img/exam/car.png" class="exam-img" />
					<p class="exam-p">科目选择</p>
				</div>
				<select>
					<option value="volvo">C1</option>
					<option value="saab">C2</option>
					<option value="opel">C3</option>
					<option value="audi">B1</option>
					<option value="audi">B2</option>
					<option value="audi">A1</option>
					<option value="audi">A2</option>
					<option value="audi">A3</option>
				</select>
				<div class="exam-div">
					<img src="../img/exam/teacher.png" class="exam-img" />
					<p class="exam-p">教练选择</p>
				</div>
				<select>
					<option value="volvo">C1</option>
					<option value="saab">C2</option>
					<option value="opel">C3</option>
					<option value="audi">B1</option>
					<option value="audi">B2</option>
					<option value="audi">A1</option>
					<option value="audi">A2</option>
					<option value="audi">A3</option>
				</select>
				<button type="button" class="mui-btn mui-btn-danger mui-btn-block">提交</button>
			</div>
			<div id="me" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">共享学车</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<label class="mui-icon mui-icon-chat mui-pull-right" style="color:gray"></label>
				</header>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" link-url="">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_1.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>个人账户信息</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_2.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>收藏管理</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_3.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>我的账户</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_4.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>购物车</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell" link-url="order/order_list.html">
						<a href="javascript:;" >
							<div class="left">
								<img src="../img/home/me/me_5.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>订单管理</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_6.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>二手车信息发布</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_7.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>通讯录</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_8.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>我的预约</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_9.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>我的团购</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_10.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>日程管理</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_11.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>考试结果</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;" id="learn_port">
							<div class="left">
								<img src="../img/home/me/me_12.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>我的档案</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_13.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>评价管理</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell" link-url="about/demo_about.html">
						<a href="javascript:;">
							<div class="left">
								<img src="../img/home/me/me_14.png" height="20px" />
							</div>
							<div class="right" style="display: flex;align-items: center;justify-content:space-between;padding-top: 12px;padding-bottom: 12px;">
								<p>关于我们</p>
								<img src="../img/home/me/right_arrow_icon.png" width="20px">
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#home">
				<span class="mui-icon iconfont icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#phone">
				<span class="mui-icon iconfont icon-phone"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item" href="#exam">
				<span class="mui-icon iconfont icon-exam"></span>
				<span class="mui-tab-label">考试</span>
			</a>
			<a class="mui-tab-item" href="#me">
				<span class="mui-icon iconfont icon-me"></span>
				<span class="mui-tab-label">个人</span>
			</a>
		</nav>
	</body>
	<!-- 通用js,sea.min和sea.config基本是不会变的,所以可以不用考虑缓存
		这里演示如果需要手动写入应该是一个怎么样的形式
		首先必须用两个script标签,这样才能确保在第二个标签里面的 seajs 可以适应
		正常情况下,这两个脚本应该是正常的script标签引用,不必考虑缓存问题
		可以试下使下面注释的内容生效,并将下面两个script标签引入内容注释
	-->
	<!--<script src="../js/core/sea.min.js"></script>
	<script src="../js/core/RayApp/sea.config.js" ></script>-->
	<script>
		SrcBoot.outSeaConfig();
	</script>
	<script>
		seajs.use('js/bizlogic/index.js');
	</script>

</html>